<template>
	<view :style="colorStyle">
		
		<HomeBall></HomeBall>

		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" :style="{ marginTop: safeTop + 'px' }">
				<!-- <image  @click="goToIndex" src="/static/base/tablebar/index.png" class="menu-icon" mode="aspectFit" /> -->
			</view>
			<view class="header-title" :style="{ marginTop: safeTop + 'px' }">商品分类</view>
			<view class="header-right">
			</view>
		</view>
		
		<view :style="{ height: contentTop + 'px' }"></view>
		<!-- <image class="icon-index" src="/static/base/tablebar/index.png"></image> -->
		<goodsCate1 v-if="category == 1" ref="classOne" :isNew="isNew"></goodsCate1>
		<goodsCate2 v-if="category == 2" ref="classTwo" :isNew="isNew" @jumpIndex="jumpIndex"></goodsCate2>
		<goodsCate3 v-if="category == 3" ref="classThree" :isNew="isNew" @jumpIndex="jumpIndex"></goodsCate3>
		<pageFooter v-if="category == 1" @newDataStatus="newDataStatus" v-show="showBar"></pageFooter>
	</view>
</template>

<script>
	import colors from '@/mixins/color';
	import goodsCate1 from '@/pages/goods_cate/goods_cate1';
	import goodsCate2 from '@/pages/goods_cate/goods_cate2';
	import goodsCate3 from '@/pages/goods_cate/goods_cate3';
	import HomeBall from '@/components/home/index.vue'
	import {
		colorChange
	} from '@/api/api.js';
	import {
		mapGetters
	} from 'vuex';
	import {
		getCategoryVersion
	} from '@/api/public.js';
	import pageFooter from '@/components/pageFooter/index.vue';
	export default {
		computed: mapGetters(['isLogin', 'uid']),
		components: {
			goodsCate1,
			goodsCate2,
			goodsCate3,
			pageFooter,
			HomeBall
		},
		mixins: [colors],
		data() {
			return {
				contentTop:0,
				safeTop: 0,
				category: '',
				is_diy: uni.getStorageSync('is_diy'),
				status: 0,
				version: '',
				isNew: false,
				isFooter: false,
				showBar: false
			};
		},
		onLoad() {
			const {
				barTop
			} = this.$util.getWXStatusHeight();
			this.safeTop = barTop + 0;
			this.contentTop = barTop + 40;
		},
		onReady() {},
		onShow() {
			this.getCategoryVersion();
		},
		methods: {
			goToIndex() {
				uni.redirectTo({
					url: '/pages/base/index/index'
				});
			},
			newDataStatus(val, num) {
				this.isFooter = val ? true : false;
				this.showBar = val ? true : false;
				this.pdHeight = num;
			},
			getCategoryVersion() {
				uni.$emit('uploadFooter');
				getCategoryVersion().then((res) => {
					if (!uni.getStorageSync('CAT_VERSION') || res.data.version != uni.getStorageSync(
							'CAT_VERSION')) {
						uni.setStorageSync('CAT_VERSION', res.data.version);
						uni.$emit('uploadCatData');
					}
					this.classStyle();
				});
			},
			jumpIndex() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			classStyle() {
				colorChange('category').then((res) => {
					let status = res.data.status;
					this.category = status;
					uni.setStorageSync('is_diy', res.data.is_diy);
					this.$nextTick((e) => {
						if (status == 2 || status == 3) {
							uni.hideTabBar();
						} else {
							this.$refs.classOne.is_diy = res.data.is_diy;
							if (!this.is_diy) {
								uni.hideTabBar();
							} else {
								this.$refs.classOne.getNav();
							}
						}
					});
				});
			}
		},
		onReachBottom: function() {
			if (this.category == 2) {
				this.$refs.classTwo.productslist();
			}
			if (this.category == 3) {
				this.$refs.classThree.productslist();
			}
		}
	};
</script>
<style scoped lang="scss">
	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		// background-color: #f2f8fd;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px;
		z-index: 100;
	}

	.header-left {
		width: 120rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header-right {
		width: 60px;
		display: flex;
		justify-content: space-between;
	}

	.menu-icon {
		width: 25px;
		height: 25px;
	}

	.header-title {
		font-size: 18px;
		font-weight: 600;
		color: #333333;
	}

	.icon-index {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
	}

	/deep/.mask {
		z-index: 99;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}
</style>